<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 模组列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div style="margin-bottom: 20px;" class="handle-box">
                <el-input v-model="input" class="search"placeholder="请输入搜索内容" style="width: 80%"clearable></el-input>
                <el-button type="primary" icon="el-icon-search" @click="searchModule(input)">搜索</el-button>
            </div>
            <el-row :gutter="5">

                    <div class="<!--bg-purple -->grid-content">
                        <el-dialog title="模组信息" :visible.sync="dialogFormVisible">
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <p style="height: 60px;" >模组id：{{moduleDetails.mid}}</p>
                                    <p style="height: 60px;" >模组名称：{{moduleDetails.name}}</p>
                                    <p style="height: 60px;" >模组概述：{{moduleDetails.describe}}</p>
                                </el-col>
                                <el-col :span="8">
                                    <p style="height: 60px;" >模组类型（COC，DND）：{{moduleDetails.type}}</p>
                                    <p style="height: 60px;" >预计游玩时间下限：{{moduleDetails.short_time}}</p>
                                    <p style="height: 60px;" >预计游玩时间上限：{{moduleDetails.long_time}}</p>
                                </el-col>
                                <el-col :span="8">
                                    <p style="height: 60px;" >模组时间背景：{{moduleDetails.time_background}}</p>
                                    <p style="height: 60px;" >模组地点背景：{{moduleDetails.place_background}}</p>
                                    <p style="height: 60px;" >推荐人数：{{moduleDetails.recommend_people}}</p>
                                </el-col>



                            </el-row>


                            <div slot="footer" class="dialog-footer">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <p style="height: 60px;float: left" >发布时间：{{moduleDetails.time_publish}}</p>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-button @click="handleCancel()">返 回</el-button>
                                        <el-button type="primary" @click="downloadModule()">下载模组</el-button>
                                        <el-button type="primary" @click="createRoom()">选择该模组创建房间</el-button>
                                    </el-col>


                                </el-row>
                            </div>
                        </el-dialog>


                            <div v-for="(item, index) in fenyeList" :key="index" >
                                <div class="bg-beige grid-content" @click="moduleDetail(item.mid)">
                                    <el-card style="margin-top: 30px">
                                        <el-row :gutter="100">
                                            <el-col :span="8" >
                                                <div class="demo-image">
                                                    <el-image
                                                        style="width: 80%; height: 80%;border-radius:25px;"
                                                        :src="item.image_path"
                                                        :fit="contain"></el-image>
                                                </div>
                                            </el-col>
                                            <el-col :span="16">
                                                <!-- <img :src="item.image_path" alt="图片未找到" class="img-class">-->
                                              <!--  <p>模组名称：{{item.name}}</p>
                                                <p>id: {{item.mid}}</p>
                                                <p>类型: {{item.type}}</p>
                                                <p>作者: {{item.author}}</p>
                                                <p>模组概述: {{item.describe}}</p>
                                                <p>创建时间：{{item.time_publish}}</p>-->
                                                <el-row :gutter="20">
                                                    <el-col :span="8">
                                                        <div   style=" line-height: 100px;">
                                                            <p style="font-weight:bold;">模组名称: {{item.name}}</p>
                                                            <p style="font-weight:bold;">类型: {{item.type}}</p>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <div style=" line-height: 100px;">
                                                            <p style="font-weight:bold;">作者: {{item.author}}</p>

                                                            <p style="font-weight:bold;">创建时间：{{item.time_publish}}</p>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <div style=" line-height: 100px;text-align: center;">

                                                            <p style="font-weight:bold;">模组概述: {{item.describe}}</p>
                                                        </div>

                                                    </el-col>
                                                </el-row>
                                            </el-col>
                                        </el-row>

                                    </el-card>

                                </div>
                            </div>


                        <div style="text-align: center;margin-top: 30px;">
                            <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10, 20, 30, 40, 50]"
                                :page-size="pagesize"
                                :total="total"
                                layout="total, prev, pager, next">
                            </el-pagination>
                        </div>
                    </div>




            </el-row>
        </div>
    </div>

</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            dialogFormVisible: false,
            formLabelWidth: '90px',
            pagesize: 10,
            currentPage: 1,
            total:0,
            fenyeList:[],
            moduleList:[],
            moduleDetails:{},
            input:'',
            file_url:'',
        }
    },
    created() {
        this.init(this.input)
        /*初始化结果*/
        /* this.searchModule(this.input)*/
        /*    axios({
              methods: 'get',
              url: axios.defaults.baseURL + 'module/get',
             /!* params: this.infoUser*!/
            }).then((res) => {
              this.$message.success("接收到了信息")
              console.log(res)
              if (res.data.code === '000000') {
                this.moduleList=res.data.content
                this.fenyeList=this.moduleList.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize)
                this.total=
              }else{
                this.$message.error(res.data.desc)
              }
            })*/


    },

    methods:{
        init(info){
            axios({
                methods: 'get',
                // url: axios.defaults.baseURL + 'module/getList/'+ info,
                url: axios.defaults.baseURL + 'module/getList?match='+info,
                params: info
            }).then((res) => {
                // this.$message.success("接收到了信息")
                this.moduleList=[];
                console.log(res)
                if (res.data.code === '000000') {
                    // this.moduleList=res.data.content
                    let get_form=res.data.content;
                    get_form.forEach((item,i) => {
                        let p;
                        try{
                            console.log("../../assets/"+item.image_path);
                            p=require("../../assets/"+item.image_path);
                        }catch (f){
                            p=require("../../assets/1.jpg")
                        }

                        let child_form={
                            author: item.author,
                            describe: item.dscri,
                            image_path: p,
                            mid: item.mid,
                            name: item.name,
                            time_publish: item.time_publish,
                            type: item.type
                        }
                        console.log(child_form)
                        this.moduleList.push(child_form);
                    })
                    this.total=res.data.content.length
                    this.fenyeList=this.moduleList.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize)
                }else{
                    this.$message.error(res.data.desc)
                }
            })
        },
        searchModule(info){
            console.log(info);
            this.init(info);
        },

        moduleDetail(mid){
            axios({
                methods: 'get',
                url: axios.defaults.baseURL + 'module/get/'+ mid ,
                params: mid
            }).then((res) => {
                this.$message.success("接收到了信息")
                console.log(res)
                if (res.data.code === '000000') {
                    this.moduleDetails=res.data.content;
                    this.file_url=res.data.content.file_path;
                }else{
                    this.$message.error(res.data.desc)
                }
            })
            this.dialogFormVisible = true
        },
        handleCancel(){  //取消
            this.dialogFormVisible=false;
        },
        downloadModule()
        {
            window.open(axios.defaults.baseURL + "file/download?name=H:/learn/software_design/front-coc-new/src/assets/"+this.moduleDetails.file_path, '_blank');
            // axios({
            //     methods: 'get',
            //     // url: axios.defaults.baseURL + "file/download?name=" + this.file_url,
            //     url: axios.defaults.baseURL + "file/download?name=C:/Users/HP/Desktop/1.jpg"
            // })
        },

        handleSizeChange: function(val) {
            this.pagesize = val;
        },
        handleCurrentChange:function(currentPage){
            const PageSize = this.pagesize;
            this.currentPage=currentPage
            this.fenyeList=this.moduleList.slice((currentPage-1)*PageSize,currentPage*PageSize)
        },
        createRoom(){
            let room_form={
                uid:localStorage.getItem('uid'),
                name:this.moduleDetails.name,
                descri:this.moduleDetails.describe,
                type:this.moduleDetails.type,
                shortTime:this.moduleDetails.short_time,
                longTime:this.moduleDetails.long_time,
                imageUrl:'',
                timeBackground:this.moduleDetails.time_background,
                placeBackground:this.moduleDetails.place_background,
                recommendPeople:this.moduleDetails.recommend_people,

            }
            axios.post(
                axios.defaults.baseURL + 'room/create/'+localStorage.getItem('uid'),
                room_form
            ).then((res) => {
                if(res.data.code==="000000"){
                    this.$message.success("创建成功");
                    console.log(res.data.content)
                    this.$router.push({path:'/Room',query: res.data.content});//"chatId": ,"rid":
                }else{
                    this.$message.error(res.data.desc)
                }
            })
        }
    }
}
</script>

<style scoped>
.img-class{
    width: 100%;
    height: 80%;
    display: block;
}
.card-class{
    height: 250px;
    width: max-content;
}
.bg-purple {
    background: #d3dce6;
    opacity: 0.8;
}
.bg-beige {
    min-height: 100px;
    background: beige;
}
.grid-content {
    border-radius: 4px;
    /*min-height: 36px;*/
}
.list{
    padding: 30px 0;
}
.list p{
    margin-bottom: 20px;
}
a{
    color: #409eff;
}
.time {
    text-align: right;
    font-size: 8px;
    color: blueviolet;
}
</style>
